<template>
<div class="rank">
  <IscrollView>
    <ul>
      <li v-for="(value, key) in category.titles" :key="key">
        <h3 class="title">{{value}}</h3>
        <ul class="normal-group" v-if="value === '官方榜'">
          <li v-for="obj in category[key]" :key="obj.rank.id" @click="selectMusic(obj.rank.id)">
            <div class="left">
              <img v-lazy="obj.rank.coverImgUrl" alt="">
              <p>{{obj.rank.updateFrequency}}</p>
            </div>
            <div class="right">
               <p v-for="(song,index) in obj.rank.tracks" :key="index">{{index}}.{{song.first}}---{{song.second}}</p>
            </div>
          </li>
        </ul>
        <ul class="other-group" v-else>
          <li v-for="obj in category[key]" :key="obj.rank.id">
            <div class="top">
              <img v-lazy="obj.rank.coverImgUrl" alt="">
              <p>{{obj.rank.updateFrequency}}</p>
            </div>
            <div class="bottom">
              <p>{{obj.rank.name}}</p>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </IscrollView>
  <transition>
    <router-view></router-view>
  </transition>
</div>
</template>

<script>
import IscrollView from '../components/IscrollView'
import { getRankList } from '../api'

export default {
  name: 'Rank',
  components: {
    IscrollView
  },
  methods: {
    selectMusic (id) {
      this.$router.push(`rank/detile/${id}/rank`)
    }
  },
  data () {
    return {
      category: {}
    }
  },
  created () {
    getRankList()
      .then((data) => {
        // console.log(data)
        this.category = data
      })
      .catch(function (err) {
        console.log(err)
      })
  }
}
</script>

<style scoped lang="scss">
  @import "../assets/css/mixin";
  @import "../assets/css/variable";
  .rank {
    position: fixed;
    top: 184px;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    /*background: skyblue;*/
    .title {
      @include font_size($font_medium);
      @include font_color();
      padding: 10px 20px;
      box-sizing: border-box;
    }

    .normal-group {
      li {
        display: flex;
        align-items: center;
        padding: 10px 20px;

        .left {
          position: relative;

          img {
            width: 200px;
            height: 200px;
            border-radius: 10px;
          }

          p {
            //@include font_color();
            @include font_size($font_medium_s);
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: #fff
          }
        }

        .right {
          margin-left: 20px;
          p {
            @include font_color();
            @include font_size($font_medium_s);
            padding: 10px 20px;
          }
        }
      }
    }

    .other-group {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        padding: 10px 20px;
        .top {
          position: relative;
          img {
            width: 200px;
            height: 200px;
            border-radius: 10px;
          }
          p {
            //@include font_color();
            @include font_size($font_medium_s);
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: #fff
          }
        }
        .bottom{
          width: 200px;
          @include no-wrap();
          p {
            @include font_color();
            @include font_size($font_medium_s);
          }
        }
      }
    }
  }
  .v-enter{
    transform: translateX(100%);
  }
  .v-enter-to{
    transform: translateX( 0%);

  }
  .v-enter-active{
    transition: transform 1s;
  }
  .v-leave{
    transform: translateX( 0%);
  }
  .v-leave-to{
    transform: translateX( 100%);
  }
  .v-leave-active{
    transition: transform 1s;
  }
</style>
